<template>
  <div class="tab-table-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <tab-table :tabs="tabs" :activeTab="activeTab" :showPaginator="true" :lazy="true"
                   :pageNumber="tabPageNumber" :pageSize="tabPageSize" @on-tab-change="tabChange"
                   @on-detail="showDetail" @on-size-change="handleSizeChange"
                   @on-page-change="handlePageChange"></tab-table>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in tabTableProps" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in tabTableMethods" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  // import TabTable from '../../components/el-extend-components/TabTable/TabTable'
  export default {
    name: 'TabTableDemo',
    // components:{
    //   TabTable
    // },
    data() {
      return {
        urls: {
          getTableHeaderUrl: './static/json/user-manage-header.json',
          getTabTableDataUrl: './static/json/tab-table-data.json',
        },
        //tab表格组件
        tabs: [
          {
            label: '项目',
            value: 'project',
            showOperate: false,
            tableData: [],
            total: 0,
            cols: [
              {field: 'titleCN', header: '项目中文名称'},
              {field: 'titleEN', header: '项目英文名称'},
              {field: 'authorCN', header: '参与人员'},
              {field: 'projectType', header: '项目类型'},
              {field: 'company', header: '所属单位'},
              {field: 'beginTime', header: '开始时间'},
              {field: 'fund', header: '总经费'},
            ]
          },
          {
            label: '论文',
            value: 'paper',
            showOperate: false,
            tableData: [],
            total: 0,
            cols: [
              {field: 'titleCN', header: '论文中文名称'},
              {field: 'titleEN', header: '论文英文名称'},
              {field: 'authorsCN', header: '作者'},
              {field: 'time', header: '发表时间'},
              {field: 'journal', header: '发表期刊'},
              {field: 'inclusion', header: '引用情况'},
              {field: 'language', header: '语言'},
            ]
          }],
        activeTab: null,
        tabPageNumber: 1,
        tabPageSize: 10,
        tabTableProps: [
          {name: 'tabs', desc: '默认值：[]。存储tab、table的表头和表格数据。'},
          {name: 'activeTab', desc: '默认值：undefined。当前激活的tab名称。'},
          {name: 'pageNumber', desc: '默认值：1。当前激活的tab内的表格的当前页。'},
          {name: 'pageSize', desc: '默认值：10。当前激活的tab内的表格的每页显示的数据条数。'},
          {name: 'showPaginator', desc: '默认值：false。是否显示分页。'},
          {name: 'lazy', desc: '默认值：false。是否启用懒加载，启用后是后台分页，默认不启用，默认前台分页。'},
        ],
        tabTableMethods: [
          {name: 'on-tab-change', desc: '参数：tabName。更改选中的tab时触发'},
          {name: 'on-size-change', desc: '参数：{pageSize,pageNumber}。更改pageSize时触发'},
          {name: 'on-page-change', desc: '参数：{pageSize,pageNumber}。更改pageNumber时触发'},
          {name: 'on-detail', desc: '参数：{index,row}。点击表格操作列的 查看详情 按钮时触发'},
        ],
      }
    },
    mounted() {
      this.activeTab = this.tabs[0].value;
      this.tabChange(this.activeTab);
    },
    methods: {
      //tab table 切换tab时的回调
      tabChange(name) {
        this.activeTab = name;
        this.tabs.forEach((d) => {
          if (d.value == name) {
            this.getTabTableData(name);
          }
        });
      },
      getTabTableData(name) {
        let me = this;
        const loading = this.$loading({
          lock: true,
          text: '正在加载...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        });
        me.tabs.forEach((d) => {
          d.value === name && (d["tableData"] = [], d.total = 0);
        });
        this.httpRequest("get", this.urls.getTabTableDataUrl, {}, {fullSuccess: true}).then(res => {
          loading.close();
          let data = res[name];
          me.tabs.forEach((d, i) => {
            d.value === name && (d["tableData"] = data, d.total = data.length);
          });
        }).catch(err => {
          loading.close();
        });
        // this.httpRequest(this, {
        //   type: 'get',
        //   url: this.urls.getTabTableDataUrl,
        //   fullSuccess: true,
        //   hasError: true,
        //   success: function (res) {
        //     loading.close();
        //     let data = res[name];
        //     me.tabs.forEach((d, i) => {
        //       d.value == name && (d["tableData"] = data, d.total = data.length);
        //     })
        //   },
        //   error: function (err) {
        //     loading.close();
        //   }
        // })
      },
      showDetail(e) {

      },
      handleSizeChange(e) {

      },
      handlePageChange(e) {

      },
    },

  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .tab-table-demo-wrapper{
    width:100%;
    height:100%;
  }

</style>

